<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>资讯</title>
	<meta charset="utf-8"/>
	 <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
     <!-- 页面描述 -->
    <meta name="description" content="遇农"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content="遇农"/>
    <!-- 网页作者 -->
    <meta name="author" content=""/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="all"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="遇农"/>
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/information.css">
    
	<!-- 	/*ie9兼容h5标签*/
	/*在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它*/
	/*并且要放到head标签中*/ -->
	<!--[if lt IE 9]>
	    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
<!-- 头部区域 -->
    <header>
            
        <!-- 顶部导航 -->
        <div class="top-nav">

                <div class="logo"><img src="img/logo.png" alt=""/></div>

              <!--   <div class="date-choice" title="选择时间,查看选择作物种植温度">

                    <form name="date">

                      <select name="year" onchange="selectYear(this.value)">

                        <option value="">选择 年</option>

                      </select>

                      <select name="month" onchange="selectMonth(this.value)">

                        <option value="">选择 月</option>

                      </select>

                      <select name="day">

                        <option value="">选择 日</option>

                      </select>

                    </form>

                </div> -->
                    <!-- <span id="showNav" class="show-nav">三</span> -->

                    <ul class="nav">

                        <li><a href="index.html">首页</a></li>

                        <li><a href="information.html" class="top-nav-active">资讯</a></li>

                        <li><a href="crop-details.html"  >作物信息</a></li>

                        <li><a href="planting search.html">种植技术</a></li>

                        <li><a href="login.html">登陆</a></li>

                       

                    </ul>

        </div>

    </header>

    <section id="information">
        <!-- <div class="information-item">
            <div class="information-item-img">
                <img src="img/Wheat/五一假期.png"/>
            </div>
            <div class="information-item-word">
                <div class="information-item-title fontweight font21">
                    五一假期前中东部仍多雨水和强对流
                    <span class="date">2019-04-26</span>
                </div>
                <div class="information-item-summary">中国天气网讯 五一前我国中东部大部地区有较强的降雨过程，江南、华南等地降雨比常年同期偏多，部分地区强对流天气频发，尤其要警惕雷暴大风、冰雹等天气；北方地区降雨也有所增多，有利于春播活动的开展，但新疆、甘肃、陕西和宁夏等地要注意防御山洪、滑坡、泥石流等灾害的发生。</div>
            </div>
        </div> -->
         <!-- <div class="information-item">
            <div class="information-item-img floatright">
                <img src="img/Wheat/强对流.png"/>
            </div>
            <div class="information-item-word floatleft">
                <div class="information-item-title fontweight font21">
                    强对流天气蓝色预警：9省将有雷暴大风或冰雹天气
                    <span class="date">2019-04-26</span>
                </div>
                <div class="information-item-summary">预计4月26日20时至27日20时，甘肃东部、宁夏南部、陕西西北部、四川东北部、贵州东部、江西东南部、福建西部、广西中北部、广东中部等地的局地将有8-10级雷暴大风或冰雹天气；甘肃陇南陇东、宁夏中南部、陕西西北部、四川东北部、贵州东部、湖南中部和南部、江西中南部、广西及广东等地的部分地区将有短时强降水天气，小时降水量20-50毫米，局地可达60毫米以上。</div>
            </div>
        </div>

         <div class="information-item">
            <div class="information-item-img">
                <img src="img/Wheat/驴友.png"/>
            </div>
            <div class="information-item-word">
                <div class="information-item-title fontweight font21">
                    驴友必看！野营遇恶劣天气自救宝典
                    <span class="date">2019年5月4号</span>
                </div>
                <div class="information-item-summary">当在野外山区遇到雷雨天气时，应该谨记以下三点：1.在空旷处无处躲避时，应尽量寻找低洼处（如土坑）藏身，或者立即下蹲，降低身体的高度；2.远离孤立、高大的树木；3.多人共处时，相互之间不要挤靠，以降低目标大小防雷击。防雨装备一定是必不可少的，轻量化的硬壳衣裤能带则带。还要多带一套备用的长袖速干衣、速干裤以及保暖毛袜，这些东西能够在你全身湿透的情况下发挥最大作用，减少因下雨导致的寒冷带来的伤害。</div>
            </div>
        </div>
         <div class="information-item">
            <div class="information-item-img floatright">
                <img src="img/Wheat/城市雨涝.jpg"/>
            </div>
            <div class="information-item-word floatleft">
                <div class="information-item-title fontweight font21">
                    城市雨涝避险
                    <span class="date">2019年5月2号</span>
                </div>
                <div class="information-item-summary">避险要点:1关闭电源、煤气，尽快撤到楼顶避险，立即发出求救信号。2.搜集木盆、木材、大件泡沫塑料等适合漂浮的材料，准备药品、通讯工具。3.不要在下大雨时骑自行车，雨天汽车在低洼处抛锚，千万不要在车中等候，要及时离开汽车到高处等待求援。4.被洪水包围时，尽快与当地政府防汛部门取得联系，积极寻求救援。
</div>
            </div>
        </div>



        <div class="information-item">
            <div class="information-item-img">
                <img src="img/Wheat/世园会.jpg"/>
            </div>
            <div class="information-item-word">
                <div class="information-item-title fontweight font21">
                    北京世园会大门将启 气象保障服务准备就绪
                    <span class="date">2019-04-26</span>
                </div>
                <div class="information-item-summary">2019中国北京世界园艺博览会（以下简称世园会）将于4月28日、29日在北京延庆分别举行开幕和开园仪式。
                历时162天，跨越春、夏、秋三季，天气复杂多变，强降水、雷电、大风、高温、雾和霾等灾害性天气多发，室内室外花卉、常绿植物、果树等作物生长对气象条件要求各不相同……公众看到的世园会，是生态文化交相辉映、惠风和畅山水和鸣的美丽家园，而对于保障世园会运行的气象工作者来说，前方则是一条充满挑战的荆棘之路。</div>
            </div>
        </div>
         <div class="information-item">
            <div class="information-item-img floatright">
                <img src="img/Wheat/华南.png"/>
            </div>
            <div class="information-item-word floatleft">
                <div class="information-item-title fontweight font21">
                    华南再次成为降水重心 黄淮江淮现降温
                    <span class="date"> 2019-04-25</span>
                </div>
                <div class="information-item-summary">今天（25日），南方的降水重心将从江南再次南压至华南一带，并多强对流天气，其中广西、广东、贵州等局地有暴雨。冷空气影响下，今天黄淮等地将现明显降温，同时华北等地气温仍低迷，最高温不足20℃。明天江淮、江南东北部也会有降温出现。</div>
            </div>
        </div>
    -->


          <a id="load_more" class="more-information">加载更多资讯</a>
          <!-- 页脚 -->
         <footer>
            <div class="footer-logo">
                <img src="img/logo2.png" alt=""/>
            </div>

            <div class="footer-title">遇农</div>
        </footer>
    </section>



<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- <script type="text/javascript" src="js/verificationCode.js"></script> -->
</body>
    <script>
        $.ajax({
				url: 'fun/infomation.php',
				type: 'post',
				dataType: 'json',
				data:{
                    start:0,
					count:6
				},
				success: function(data){
					console.log(data);
                    for(var i=0;i<data.length;i+=2){
                        var main = data[i].main.substr(0,100);
                        console.log(data[i].main.length>=100)
                        if(data[i].main.length>=100)
                        main +="......";
                        $(
                            "<div class='information-item'>"
                                +"<div class='information-item-img'>"
                                +    "<img src='"+data[i].url+"'/>"
                                +"</div>"
                                +"<div class='information-item-word'>"
                                +    "<div class='information-item-title fontweight font21'>"
                                +        data[i].title
                                +        "<span class='date'>"+data[i].time+"</span>"
                                +    "</div>"
                                +    "<div class='information-item-summary'>"
                                +main+"</div>"
                                +"</div>"
                            +"</div>"
                        ).insertBefore($("#load_more"))
                        var main2 = data[i+1].main.substr(0,100);
                        if(data[i+1].main.length>=100)
                        main2 +="......";
                        $(
                            "<div class='information-item'>"
                                +"<div class='information-item-img floatright'>"
                                +    "<img src='"+data[i+1].url+"'/>"
                                +"</div>"
                                +"<div class='information-item-word floatright'>"
                                +    "<div class='information-item-title fontweight font21'>"
                                +        data[i+1].title
                                +        "<span class='date'>"+data[i+1].time+"</span>"
                                +    "</div>"
                                +    "<div class='information-item-summary'>"
                                +main2+"</div>"
                                +"</div>"
                            +"</div>"
                        ).insertBefore($("#load_more"))
                    }
				}
			});
        $("#load_more").click(function(){
            var num = getElementsByClassName('information-item');
           // alert(num);
            $.ajax({
                url: 'fun/infomation.php',
				type: 'post',
				dataType: 'json',
				data:{
                    start:num,
					count:6
				},
                success: function(data){
					console.log(data);
                    for(var i=0;i<data.length;i+=2){
                        var main = data[i].main.substr(0,100);
                        console.log(data[i].main.length>=100)
                        if(data[i].main.length>=100)
                        main +="......";
                        $(
                            "<div class='information-item'>"
                                +"<div class='information-item-img'>"
                                +    "<img src='"+data[i].url+"'/>"
                                +"</div>"
                                +"<div class='information-item-word'>"
                                +    "<div class='information-item-title fontweight font21'>"
                                +        data[i].title
                                +        "<span class='date'>"+data[i].time+"</span>"
                                +    "</div>"
                                +    "<div class='information-item-summary'>"
                                +main+"</div>"
                                +"</div>"
                            +"</div>"
                        ).insertBefore($('#load_more'));
                        var main2 = data[i+1].main.substr(0,100);
                        if(data[i+1].main.length>=100)
                        main2 +="......";
                        $(
                            "<div class='information-item'>"
                                +"<div class='information-item-img floatright'>"
                                +    "<img src='"+data[i+1].url+"'/>"
                                +"</div>"
                                +"<div class='information-item-word floatright'>"
                                +    "<div class='information-item-title fontweight font21'>"
                                +        data[i+1].title
                                +        "<span class='date'>"+data[i+1].time+"</span>"
                                +    "</div>"
                                +    "<div class='information-item-summary'>"
                                +main2+"</div>"
                                +"</div>"
                            +"</div>"
                        ).insertBefore($('#load_more'));
                    }
				}
            }
            )
        });
       //方法 根据类名获取div数量
       function getElementsByClassName(n) {
        var classElements = [],allElements = document.getElementsByTagName('div');//所有div
        for (var i=0; i< allElements.length; i++ )
        {
        if (allElements[i].className == n ) {
            classElements[classElements.length] = allElements[i];
            }
        }
        return classElements.length;
        }
    </script>
</html>